<!-- 测试题 -->


<!-- questions -->
<script type="text/x-template" id="template-questions">

    <div class="col-md-12">
        <h3>试卷试题：</h3>
        <div class="col-md-12">
            <a class="btn btn-default" @click="getList">刷新</a>
            <a v-show="show.list" class="btn btn-info" @click="add(1)">添加单选题</a>
            <a v-show="show.list" class="btn btn-info" @click="add(2)">添加多选题</a>
            <a v-show="show.edit" class="btn btn-danger" @click="showWin('list')">关闭</a>
        </div>

        <div class="col-md-12" v-show="show.list">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>分类</th>
                    <th>标题</th>
                    <th>题型</th>
                    <th>得分</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(q,i) in list">
                    <td>{{q.questions_id}}</td>
                    <td>{{classNames[i]}}</td>
                    <td>{{q.questions_title}}</td>
                    <td>{{questionsTypes[i]}}</td>
                    <td>{{q.questions_scores}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(q)">编辑</a>
                        <a class="btn btn-danger btn-xs" @click="del(q)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>

        <div class="col-md-8 col-md-offset-2" v-show="show.edit">
            <h3>编辑</h3>

            <div class="form-group" :class="{'has-error': !edit_item.questions_class_child}">
                <label>分类：</label>
                <select class="" v-model="edit_class_parent">
                    <option v-for="(c, i) in classTree" :value="i">{{c.class_name}}</option>
                </select>
                <select v-if="classTree[edit_class_parent] && classTree[edit_class_parent].children"
                        class="" v-model="edit_item.questions_class_child">
                    <option v-for="(c, i) in classTree[edit_class_parent].children"
                            :value="c.class_id">{{c.class_name}}</option>
                </select>
            </div>

            <div class="form-group">
                <label>标题：</label>
                <input class="form-control" v-model="edit_item.questions_title">
            </div>

            <div class="form-group" :class="{'has-error': !edit_item.questions_content}">
                <label>内容：</label>
                <ck-editor v-model="edit_item.questions_content" :tag="edit_tag"></ck-editor>
            </div>

            <div class="form-group">
                <label>选项内容：</label>
                <select class="form-control" v-model="edit_item.option_content_type">
                    <option value="1">文本</option>
                    <option value="2">图片</option>
                </select>
            </div>

            <div class="form-group" v-if="3 != edit_item.questions_type"
                 :class="{'has-error': edit_item.questions_option_edit.length<4}">
                <label>选项：</label>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>选项</th>
                        <th>内容</th>
                        <th>默认答案</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(o, i) in edit_item.questions_option_edit">
                        <td>{{options[i]}}</td>
                        <td>
                            <input v-if="1 == edit_item.option_content_type" v-model="o.ans.text">
                            <file-uploader v-if="2 == edit_item.option_content_type" v-model="o.ans.image"
                                           filetype="image" oss="true" policyurl="/alioss/get_policy"></file-uploader>
                        </td>
                        <td>
                            <label v-if="1 == edit_item.questions_type">设置答案：
                                <input type="radio" v-model="o.choose" :value="options[i]" name="_choose">
                            </label>
                            <label v-if="2 == edit_item.questions_type">设置答案：
                                <input type="checkbox" v-model="o.choose">
                            </label>
                        </td>
                        <td>
                            <a class="btn btn-danger btn-xs fa fa-trash-o" @click="delOption(i)"></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <a class="btn btn-primary btn-xs" @click="addOption">添加</a>
            </div>

            <div class="form-group" v-if="3 == edit_item.questions_type">
                <label>答案：</label>
                <div>
                    <label><span>正确：</span><input type="radio" v-model="edit_item.questions_answer" value="1" name="_answer"></label>
                    <label><span>错误：</span><input type="radio" v-model="edit_item.questions_answer" value="0" name="_answer"></label>
                </div>
            </div>

            <div class="form-group">
                <label>得分：</label>
                <input class="form-control" type="number" min="1" step="1" v-model="edit_item.questions_scores">
            </div>

            <div class="form-group">
                <a class="btn btn-primary" @click="save">保存</a>
            </div>

        </div>

    </div>
</script>
<script>
    (function () {

        var Types = {'1':'单选','2':'多选'};
        var Options = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
        var OptionAnswerTypes = {
            1: '文本',
            2: '图片'
        };
        function Option(type = 1) {
            function Answer(type) {
                this.type = type;
                this.text = '';
                this.image = '';
            }
            this.ans = new Answer(type);
        }
        function Questions(class_id, type = 1) {
            this.questions_class_child = class_id;
            this.questions_title = '';
            this.questions_content = '';
            this.option_content_type = 1;
            this.questions_option_edit = [
                new Option(),
                new Option(),
                new Option(),
                new Option()
            ];
            this.questions_option = {};
            this.questions_answer = null;
            this.questions_scores = 1;
            this.questions_type = type;
        }
        Vue.component('questions-list', {
            template: '#template-questions',
            props: ['exam_id'],
            data: function () {
                return {
                    list: [],
                    edit_item: new Questions(0),
                    edit_content: null,
                    edit_tag: Math.random(),
                    edit_class_parent: -1,
                    add_item_tmp: null,
                    page: {
                        rows: 10,
                        page: 1,
                        last: 1,
                        class_id: 0,
                        exam_id: this.exam_id
                    },
                    show: {
                        list: true,
                        edit: false
                    },
                    options: Options,
                    types: Types,
                    optionAnswerTypes: OptionAnswerTypes,
                    classTree: []
                }
            },
            created: function () {
                ajax({
                    uri: '/exam/class_tree',
                    data: {},
                    success: function (resp) {
                        this.classTree = resp.data;
                    }.bind(this)
                });
            },
            methods: {
                getList: function () {
                    if (this.page.exam_id <= 0) {
                        this.list = [];
                        return;
                    }
                    ajax({
                        uri: '/exam/questions_list',
                        data: this.page,
                        success: function (resp) {
                            var list = resp.data;
                            list.forEach(function (item, index) {
                                if (3 == item.questions_type) {
                                    item.questions_answer = "true" == item.questions_answer ? 1 : 0;
                                    return;
                                }
                                var opts = JSON.parse(item.questions_option);
                                var opts_edit = [];
                                var ans = JSON.parse(item.questions_answer);
                                for (var o in opts) {
                                    Options.forEach(function (c, i) {
                                        if (c === o) {
                                            opts_edit[i] = {ans: opts[o]};
                                            if (1 == item.questions_type) {
                                                if (c == ans) opts_edit[i].choose = c;
                                            } else if (2 == item.questions_type) {
                                                for (var j=0; j<ans.length; j++) {
                                                    if (c == ans[j]) opts_edit[i].choose = c;
                                                }
                                            }
                                        }
                                    });
                                }
                                item.questions_option_edit = opts_edit;
                                item.questions_option = opts;
                                item.questions_answer = ans;
                            });
                            this.list = list;
                            this.page.last = resp.last_page;
                        }.bind(this)
                    });
                },
                add: function (type) {
                    this.add_item_tmp = this.edit_item = new Questions(this.page.class_id, type);
                    this.showWin('edit');
                    this.edit_content = null;
                    this.edit_tag = Math.random();
                },
                edit: function (item) {
                    var tree = this.classTree;
                    for (var i=0; i<tree.length; i++) {
                        if (tree[i].class_id == item.questions_class_parent) {
                            this.edit_class_parent = i;
                        }
                    }
                    this.edit_item = item;
                    this.edit_content = item.questions_content;
                    this.showWin('edit');
                    this.edit_tag = Math.random();
                },
                save: function () {
//                    this.edit_item.questions_content = this.edit_content;
                    if (!this.edit_item.questions_content) {alert("内容不能为空");return;}
                    if (!this.edit_item.questions_class_child) {alert("请选择分类");return;}
                    if (3 != this.edit_item.questions_type) {
                        if (this.edit_item.questions_option_edit.length < 4) {alert("选项至少4个");return;}
                    }

                    var item = {}, opt, ans;
                    for (var p in this.edit_item) {
                        if (p !== 'questions_option_edit') item[p] = this.edit_item[p];
                    }

                    if (3 == this.edit_item.questions_type) {
                        opt = null;
                        ans = this.edit_item.questions_answer == '1';
                    } else {
                        opt = {};
                        ans = 2 == this.edit_item.questions_type ? [] : null;
                        this.edit_item.questions_option_edit.forEach(function (o, i) {
                            o.ans.type = item.option_content_type;
                            opt[Options[i]] = o.ans;
                            if (1 == this.edit_item.questions_type) {
                                if (o.choose) ans = o.choose;
                            } else if (2 == this.edit_item.questions_type) {
                                if (true == o.choose) ans.push(Options[i]);
                            }
                        }.bind(this));
                        if (ans === null || !ans.length) {alert("请设置答案");return;}
                    }
                    item.questions_option = JSON.stringify(opt);
                    item.questions_answer = JSON.stringify(ans);
                    item.exam_id = this.exam_id;

                    ajax({
                        uri: '/exam/questions_save',
                        data: item,
                        success: function (resp) {
                            this.edit_content = null;
                            this.getList();
                            this.showWin('list');
                            this.add_item_tmp = new Questions(0)
                        }.bind(this)
                    });
                },
                del: function (item) {
                    ajax({
                        uri: '/exam/questions_del',
                        data: {id: item.questions_id},
                        success: function (resp) {
                            this.getList();
                        }.bind(this)
                    })
                },
                setContent: function (content) {
                    this.edit_content = content;
                },
                addOption: function () {
                    this.edit_item.questions_option_edit.push(new Option());
                },
                delOption: function (i) {
                    this.edit_item.questions_option_edit.splice(i,1);
                },
                showWin: function (p) {
                    for (var s in this.show) {
                        this.show[s] = (s == p);
                    }
                }
            },
            computed: {
                classNames: function () {
                    var names = [];

                    this.list.forEach(function (item, index) {
                        var name = '';

                        this.classTree.forEach(function (p, i) {
                            if (item.questions_class_parent == p.class_id) {
                                name += p.class_name;

                                p.children.forEach(function (c, j) {
                                    if (item.questions_class_child == c.class_id) {
                                        name += '/' + c.class_name;
                                    }
                                });
                            }
                        });

                        names[index] = name;
                    }.bind(this));

                    return names;
                },
                questionsTypes: function () {
                    var types = [];
                    this.list.forEach(function (item, index) {
                        types[index] = Types[item.questions_type];
                    });
                    return types;
                }
            },
            watch: {
                'exam_id': function (nv, ov) {
                    this.page.exam_id = nv;
                    this.getList()
                },
                'page.page': function (nv, ov) {
                    this.getList();
                }
            }
        });

    }());
</script>
<!-- ./questions -->



<!-- video-questions exam -->
<style>
    .select-box{width: 40%;float: left;position: relative;margin-right: 2%;}
</style>
<script type="text/x-template" id="template-curriculum-video-questions-exam">
    <div>

        <div class="col-md-12">
            <h3>测试题</h3>

            <div class="form-group">
                <label>测试时长（时:分）：</label>
                <input type="time" class="" v-model="duration_str">
            </div>

            <div class="form-group">
                <a class="btn btn-primary" @click="saveExam">保存试卷设置</a>
            </div>

        </div>

        <div class="col-md-12" v-show="exam_id > 0">
            <questions-list :exam_id="exam_id"></questions-list>
        </div>

    </div>
</script>
<script>
    window.Exam = {
        template: '#template-curriculum-video-questions-exam',
        props: ['video_id'],
        data: function () {
            return {
                exam_id: 0,
                duration: 30,
                duration_str: '00:30'
            }
        },
        created: function () {
            this.getExam();
        },
        methods: {
            getExam: function () {
                if (this.video_id > 0)
                    ajax({
                        uri: '/exam/exam_get',
                        data: {video_id: this.video_id},
                        success: function (resp) {
                            if (resp.data instanceof Object) {
                                this.exam_id = resp.data.exam_id;
                                this.duration = resp.data.exam_duration;
                            } else {
                                this.exam_id = 0;
                                this.duration = 30;
                            }
                        }.bind(this)
                    })
            },
            saveExam: function () {
                ajax({
                    uri: '/exam/exam_save',
                    data: {video_id: this.video_id, exam_duration: this.duration},
                    success: function (resp) {
                        this.exam_id = resp.data.exam_id;
                        this.duration = resp.data.exam_duration;
                    }.bind(this)
                })
            }
        },
        watch: {
            'duration_str': function (n, o) {
                if (typeof n === "string") {
                    var d = n.split(':');
                    this.duration = (d[0] * 60 + d[1]) * 60;
                }
            },
            'duration': function (n, o) {
                var m = Math.floor(n/60);
                var h = Math.floor(m / 60);
                m = m - h * 60;
                this.duration_str = (h>9?h:'0'+h)+':'+(m>9?m:'0'+m);
            },
            'video_id': function (nv, ov) {
                this.getExam();
            }
        }
    };
</script>
<!-- ./video-questions exam -->

<!-- 晒单 -->
<script type="text/x-template" id="template-curriculum-post-bill">
    <div class="col-md-12">
        <table class="table table-responsive table-striped table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>交易日(整数)</th>
                <th>涨幅(整数%)</th>
                <th>股票代码</th>
                <th>股票名称</th>
                <th>发布时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in list">
                <td>{{item.bill_id}}</td>
                <td>
                    <input v-if="item._edit" v-model="item.bill_trading_day">
                    <span v-if="!item._edit">{{item.bill_trading_day}}</span>
                </td>
                <td>
                    <input v-if="item._edit" v-model="item.bill_income">
                    <span v-if="!item._edit">{{item.bill_income}}</span>
                </td>
                <td>
                    <input v-if="item._edit" v-model="item.bill_stock_code">
                    <span v-if="!item._edit">{{item.bill_stock_code}}</span>
                </td>
                <td>
                    <input v-if="item._edit" v-model="item.bill_stock_name">
                    <span v-if="!item._edit">{{item.bill_stock_name}}</span>
                </td>
                <td>{{item.bill_time}}</td>
                <td>
                    <a v-if="!item._edit" class="btn btn-primary btn-xs" @click="item._edit = true">编辑</a>
                    <a v-if="item._edit" class="btn btn-warning btn-xs" @click="item._edit = false">取消</a>
                    <a v-if="item._edit" class="btn btn-primary btn-xs" @click="save(item)">保存</a>
                    <a class="btn btn-danger btn-xs" @click="del(i)">删除</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="100">
                    <pagination :total="page.total" :limit="page.limit" :offset="page.offset" @turn="turnPage" ></pagination>
                </td>
            </tr>
            <tr>
                <td colspan="100">
                    <a class="btn btn-default" @click="getList">刷新</a>
                    <a class="btn btn-info" @click="add">添加</a>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</script>
<script>
    (function () {

        function Bill(video_id) {
            this.bill_user = 0;
            this.bill_video = video_id;
            this._edit = true;
        }

        Vue.component('curriculum-post-bill', {
            template: '#template-curriculum-post-bill',
            props: {
                video_id: {
                    type: Number,
                    require: true
                }
            },
            data: function () {
                return {
                    list: [],
                    page: {
                        total: 0,
                        limit: 10,
                        offset: 0,
                        video_id: 0
                    }
                };
            },
            created: function () {
            },
            methods: {
                getList: function () {
                    if (!this.page.video_id) {
                        this.list = [];
                        return;
                    }

                    ajax({
                        uri: '/curriculum/bill_list',
                        data: this.page,
                        success: function (resp) {

                            resp.list.forEach(function (a, i) {
                                a._edit = false;
                            });

                            this.list = resp.list;

                            this.page.total = resp.total;
                        }.bind(this)
                    });
                },
                turnPage: function (offset) {
                    this.page.offset = offset;
                },
                add: function () {
                    this.list.push(new Bill(this.video_id));
                },
                save: function (item) {
                    item._edit = undefined;
                    ajax({
                        uri: '/curriculum/bill_save',
                        data: item,
                        success: function (resp) {
                            this.getList();
                        }.bind(this)
                    });
                },
                del: function (i) {
                    var item = this.list[i];
                    if (!item.bill_id) {
                        this.list.splice(i, 1);
                        return;
                    }
                    ajax({
                        uri: '/curriculum/bill_del',
                        data: {bill_id: item.bill_id},
                        success: function (resp) {
                            this.getList();
                        }.bind(this)
                    });
                }
            },
            watch: {
                'page.offset': function (nv, ov) {
                    this.getList();
                },
                'page.video_id': function (nv, ov) {
                    this.getList();
                },
                'video_id': function (nv, ov) {
                    this.page.video_id = nv;
                }
            }
        });
    })();
</script>
<!-- ./video-bills exam -->


<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="curriculum-video-app">

    <div class="row" v-show="!show.bill">
        <div class="col-md-6">
            <a class="btn btn-default" v-show="show.table" @click="getList">刷新</a>
            <a class="btn btn-info" v-show="show.table" @click="add">添加</a>
        </div>
        <div class="col-md-6" v-show="show.table">
            <div class="col-md-4">
                <div class="form-group">
                    <label>选择课程：<a class="btn btn-info btn-xs" @click="getCurriculum">刷新</a></label>
                    <select v-model="page.curriculum_id">
                        <option value="0">全部</option>
                        <option v-for="c in curriculumList" :value="c.id">{{c.name}}</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <select v-model="page.hide">
                        <option value="-1">全部</option>
                        <option value="0">上架</option>
                        <option value="1">下架</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row" v-show="show.table">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>老师</th>
                    <th>课程</th>
                    <th>难易级别</th>
                    <th>适合用户级别</th>
                    <th>免费</th>
                    <th>免费时段</th>
                    <th>观看数(实际/运营)</th>
                    <th width="100">排序</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.video_id}}</td>
                    <td>{{item.video_title}}</td>
                    <td>{{item.video_teacher | Teacher}}</td>
                    <td>{{item.video_curriculum | Curriculum}}</td>
                    <td>{{item.video_level | Level}}</td>
                    <td>{{item.video_user_level | UserLevel}}</td>
                    <td>{{item.video_isfree | FreeStyle}}</td>
                    <td>{{item.video_sales}}</td>
                    <td>{{item.video_views}} / {{item.views_total}}</td>
                    <td>
                        <input v-if="sort_edit" class="number-input" type="number" min="1" v-model="item.video_sort">
                        <span v-if="!sort_edit">{{item.video_sort}}</span>
                    </td>
                    <td>{{item.vod_stat | NetEaseStatus}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(item)">编辑</a>

                        <span v-if="item.video_id > 0">
                            <a class="btn btn-primary btn-xs" @click="uploadVideo(item)">视频</a>
                        </span>

                        <span>
                            <a v-if="item.hide" class="btn btn-info btn-xs" @click="hide(item)">上架</a>
                            <a v-if="!item.hide" class="btn btn-warning btn-xs" @click="hide(item)">下架</a>
                        </span>

                        <span v-if="!item.hide">
                            <a v-if="item.rec_id" class="btn btn-danger btn-xs" @click="recommend(item, 1)">取消推荐</a>
                            <a v-if="!item.rec_id" class="btn btn-warning btn-xs" @click="recommend(item, 0)">加推荐</a>
                        </span>

                        <span v-if="!item.hide">
                            <a class="btn btn-info btn-xs" @click="bills(item)">晒单</a>
                            <a class="btn btn-info btn-xs" @click="exam(item)">试题</a>
                        </span>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="8">
                        <pagination :total="page.total" :limit="page.limit" :offset="page.offset" @turn="turnPage" ></pagination>
                    </td>
                    <td>
                        <a v-if="sort_edit" class="btn btn-primary btn-xs" @click="saveSort">保存</a>
                        <a v-if="sort_edit" class="btn btn-warning btn-xs" @click="sort_edit = false">取消</a>
                        <a v-if="!sort_edit" class="btn btn-info btn-xs" @click="sort_edit = true">修改排序</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-12">
            <a class="btn btn-danger" @click="ch('table')">关闭</a>
        </div>
        <div class="col-md-8 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">

                <div class="form-group" :class="{ 'has-error': !edit_item.video_curriculum }">
                    <label>课程：<a class="btn btn-info btn-xs" @click="getCurriculum">刷新</a></label>
                    <select class="form-control" v-model="edit_item.video_curriculum">
                        <option v-for="c in curriculumList" :value="c.id">{{c.name}}</option>
                    </select>
                </div>

                <div class="form-group" :class="{'has-danger': !edit_item.video_title}">
                    <label>标题：</label>
                    <input class="form-control" v-model="edit_item.video_title">
                </div>

                <div class="form-group" :class="{'has-danger': !edit_item.video_teacher}">
                    <label>老师：<a class="btn btn-info btn-xs" @click="getTeachers">刷新</a></label>
                    <select class="form-control" v-model="edit_item.video_teacher">
                        <option v-for="t in teachers" :value="t.id">{{t.realname}}</option>
                    </select>
                </div>

                <div class="form-group" :class="{'has-danger': !edit_item.video_cover}">
                    <label>封面：</label>
                    <file-uploader v-model="edit_item.video_cover" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
                </div>

                <div v-if="!edit_item.video_id" class="form-group">
                    <strong style="color: red">创建完成后才能上传视频！</strong>
                </div>

                <div class="form-group">
                    <label>介绍：</label>
                    <ck-editor v-model="edit_item.video_description" :tag="edit_tag"></ck-editor>
                </div>

                <div class="form-group" v-if="0">
                    <label>难度等级：</label>
                    <select class="form-control" v-model="edit_item.video_level">
                        <option v-for="l in levels" :value="l.id">{{l.name}}</option>
                    </select>
                </div>

                <div class="form-group" v-if="0">
                    <label>适合用户等级：</label>
                    <select class="form-control" v-model="edit_item.video_user_level">
                        <option v-for="l in userLevels" :value="l.id">{{l.name}}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>允许预览：</label>
                    <input type="checkbox" v-model="edit_item.preview_allowed">
                </div>
                <div class="form-group" v-show="true == edit_item.preview_allowed">
                    <label>上传预览视频：</label>
                    <file-uploader v-model="edit_item.preview_url" filetype="video" oss="true" policyUrl="/alioss/get_policy" filesize="10M" ></file-uploader>
                </div>

                <div class="form-group">
                    <label>免费：</label>
                    <select class="form-control" v-model="edit_item.video_isfree">
                        <option v-for="l in freeStyles" :value="l.id">{{l.name}}</option>
                    </select>
                </div>
                <div class="form-group" v-show="2 == edit_item.video_isfree">
                    <label>限免时间段：</label>
                    <div>
                        开始：<input v-model="edit_item.video_free_start_time" placeholder="格式：2017/08/22">
                         - 结束：<input v-model="edit_item.video_free_end_time" placeholder="格式：2017/08/22">
                    </div>
                </div>

                <div class="form-group">
                    <label>观看数：</label>
                    <input class="form-control" v-model="edit_item.views_total">
                </div>

                <div class="form-group">
                    <label>排序：</label>
                    <input class="form-control" type="number" min="1" step="1" v-model="edit_item.video_sort">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                    <a class="btn btn-default" @click="ch('table')">返回</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row" v-show="show.upload">
        <div class="col-md-12">
            <div class="col-md-12">
                <div class="form-group">
                    <label>{{upload_item.title}}</label>
                </div>
                <div class="form-group">
                    <label>上传视频</label>
                    <video-uploader :videoid="upload_item.video_id"></video-uploader>
                </div>
                <div class="form-group">
                    <a class="btn btn-danger" @click="ch('table')">关闭</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row" v-show="show.bill">
        <div class="col-md-12">
            <a class="btn btn-danger" @click="bill_video_id=0, ch('table')">返回</a>
        </div>
        <curriculum-post-bill :video_id="bill_video_id"></curriculum-post-bill>
    </div>

    <div class="row" v-show="show.exam">
        <div class="col-md-12">
            <a class="btn btn-danger" @click="exam_video_id=0, ch('table')">返回</a>
        </div>
        <exam :video_id="exam_video_id"></exam>
    </div>

</section>
<!-- /.content -->

<script>
    // {1:'初级',2:'中级',3:'高级'}
    Levels = [
        {id:1,name:"初级"},
        {id:2,name:"中级"},
        {id:3,name:"高级"}
    ];
    UserLevels = [
        {id:1,name:"小白"},
        {id:2,name:"韭菜"},
        {id:3,name:"菜鸟"},
        {id:4,name:"老手"},
        {id:5,name:"专家"},
        {id:6,name:"大神"}
    ];
    FreeStyles = [
        {id:0,name:'无'},
        {id:1,name:'完全免费'},
        {id:2,name:'限时免费观看'}
    ];

    function Video(curriculum_id = 0) {
        this.video_curriculum = curriculum_id;
        this.preview_allowed = false;
        this.video_sort = 255;
        this.video_isfree = 0;
        this.video_level = 1;
        this.video_user_level = 1;
        this.hide = true;
    }

    var curriculum_video_app = new Vue({
        el: '#curriculum-video-app',
        components: {
            exam: Exam
        },
        data: {
            list: [],
            edit_item: new Video(),
            edit_content: null,
            edit_tag: Math.random(),
            upload_item: {},
            page: {
                total: 0,
                limit: 10,
                offset: 0,
                curriculum_id: 0,
                hide: -1
            },
            curriculumList: [],
            teachers: [],
            show: {
                table: true,
                edit: false,
                upload: false,
                bill: false,
                exam: false
            },
            levels: Levels,
            userLevels: UserLevels,
            freeStyles: FreeStyles,
            bill_video_id: 0,
            exam_video_id: 0,
            sort_edit: false,
            rules: {
                'video_title': '标题',
                'video_teacher': '老师',
                'video_curriculum': '课程',
                'video_cover': '封面',
            }
        },
        created: function () {
            this.getCurriculum();
            this.getTeachers();
            this.getList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/curriculum/video_list',
                    data: this.page,
                    success: function(resp){
                        var list = resp.list;
                        for (var i=0; i<list.length; i++) {
                            list[i].video_free_start_time = getDateFromTimestamp(list[i].video_free_start_time);
                            list[i].video_free_end_time = getDateFromTimestamp(list[i].video_free_end_time);
                        }
                        this.list = list;
                        this.page.total = resp.total;
                    }.bind(this)
                });
            },
            getCurriculum: function () {
                ajax({
                    uri: '/common/curriculum_names',
                    success: function (resp) {
                        this.curriculumList = resp.data;
                    }.bind(this)
                });
            },
            getTeachers: function () {
                ajax({
                    uri: '/common/teacher_names',
                    success: function (resp) {
                        this.teachers = resp.data;
                    }.bind(this)
                });
            },
            setContent: function (c) {
                this.edit_content = c;
            },
            add: function () {
                if (!this.edit_item.video_id) {
                    this.edit_item = new Video(this.edit_item.video_curriculum);
                }
                else this.edit_item = new Video(this.page.curriculum_id);

                this.edit_content = null;
                this.edit_tag = Math.random();

                this.ch('edit');
            },
            edit: function (item) {
                this.edit_item = item;
                this.edit_content = item.video_description;
                this.edit_tag = Math.random();
                this.ch('edit');
            },
            save: function () {
                var item = {};
                for (var p in this.edit_item) {
                    item[p] = this.edit_item[p];
                }

                for (var p in this.rules) {
                    if (!item[p]) {
                        alert("请完善资料：" + this.rules[p]);
                        return
                    }
                }

                ajax({
                    uri: '/curriculum/video_save',
                    data: item,
                    success: function(resp){
                        this.edit_content = null;
                        this.ch('table');
                        this.getList();
                    }.bind(this)
                });
            },
            uploadVideo: function (item) {
                this.upload_item = {
                    title: item.video_title,
                    video_id: item.video_id
                };
                this.ch('upload');
            },
            saveSort: function () {
                var sorts = [];
                this.list.forEach(function (o, i) {
                    sorts.push({id: o.video_id, sort: o.video_sort});
                });
                if (sorts.length > 0) {
                    ajax({
                        uri: '/curriculum/video_set_sorts',
                        data: {sorts: JSON.stringify(sorts)},
                        success: function (resp) {
                            this.sort_edit = false;
                            this.getList();
                        }.bind(this)
                    })
                }
            },
            hide: function (item) {
                var hide = item.hide ? 0 : 1;
                ajax({
                    uri: '/curriculum/video_set_hide',
                    data: {id: item.video_id, hide: hide},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            recommend: function (item, op = 0) {
                console.log(item);
                ajax({
                    uri: '/curriculum/recommend',
                    data: {
                        rec_id: item.rec_id,
                        rec_item_id: item.video_id,
                        rec_item_type: 1,
                        cancel: op
                    },
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            turnPage: function (offset, refresh = false) {
                if (refresh && offset == this.page.offset) {
                    this.getList();
                } else {
                    this.page.offset = offset;
                }
            },
            bills: function (item) {
                this.bill_video_id = item.video_id;
                this.ch('bill');
            },
            exam: function (item) {
                this.exam_video_id = item.video_id;
                this.ch('exam');
            },
            ch: function (k) {
                var show = this.show;
                for (var p in show) {
                    show[p] = (k == p);
                }
            },
            setDuration: function (duration) {
                this.edit_item.duration = duration;
            }
        },
        filters: {
            Curriculum: function (cid) {
                var curriList = curriculum_video_app.curriculumList;
                for (var i=0; i<curriList.length; i++) {
                    var t = curriList[i];
                    if (t.id == cid) {
                        return t.name;
                    }
                }
                return '';
            },
            Teacher: function (id) {
                var teachers = curriculum_video_app.teachers;
                for (var i=0; i<teachers.length; i++) {
                    var t = teachers[i];
                    if (t.id == id) {
                        return t.realname;
                    }
                }
                return '';
            },
            Level: function (l) {
                for (var i=0; i<Levels.length; i++) {
                    if (Levels[i].id == l) return Levels[i].name;
                }
                return '';
            },
            UserLevel: function (l) {
                for (var i=0; i<UserLevels.length; i++) {
                    if (UserLevels[i].id == l) return UserLevels[i].name;
                }
                return '';
            },
            FreeStyle: function (val) {
                for (var i=0; i<FreeStyles.length; i++) {
                    if (FreeStyles[i].id == val) return FreeStyles[i].name;
                }
                return '';
            },
            NetEaseStatus: function (s) {
                var Status = {
                    '1':'未上传',
                    '2':'正在上传',
                    '3':'上传完成',
                    '4':'转码完成',
                    '5':'加密完成'
                };
                return Status[s] || '';
            }
        },
        watch: {
            'page.offset': function (nv, ov) {
                this.getList();
            },
            'page.curriculum_id': function (nv, ov) {
                this.turnPage(0, true);
            },
            'page.hide': function (nv, ov) {
                this.turnPage(0, true);
            }
        }
    });
</script>